<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入门</title>
    <!-- 这里可以添加CSS样式文件 -->
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://threelab.cn/threejs/build/three.module.js",
          "three/addons/": "https://threelab.cn/threejs/examples/jsm/",
          "gsap": "./js/gsap/index.js"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      import { GUI } from "three/addons/libs/lil-gui.module.min.js";
      import gsap from "gsap";

      const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      camera.position.set(0, 30, 30);

      const renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        logarithmicDepthBuffer: true,
      });

      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

      const controls = new OrbitControls(camera, renderer.domElement);

      scene.add(new THREE.AxesHelper(1000));

      scene.add(new THREE.GridHelper(100, 20));

      animate();

      function animate() {
        requestAnimationFrame(animate);

        controls.update();

        renderer.render(scene, camera);
      }

      window.onresize = () => {
        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
      };

      // 环境贴图
      const boxGeometry = new THREE.BoxGeometry(10, 10, 10);

      const boxMaterial = new THREE.MeshBasicMaterial({ color: "blue" });

      const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);

      scene.add(boxMesh);

      new GUI()
        .add(
          {
            fn: () => {
              // 创建一个相机动画
              createGsapAnimation(camera.position, { x: 20, y: 20, z: 20 });

              // 创建一个目标运动动画
              createGsapAnimation(controls.target, { x: -5, y: 2, z: 1 });
            },
          },
          "fn"
        )
        .name("播放");

      /* 视角动画 */
      function createGsapAnimation(position, position_, gsapQuery = null) {
        //设置动画 x轴运动 持续时间
        return gsap.to(
          position,

          {
            ...position_,

            //间隔时间
            duration: 2,

            //动画参数名
            ease: "none",

            //重复次数
            repeat: 0,

            //往返移动
            yoyo: false,

            yoyoEase: true,

            ...gsapQuery,
          }
        );
      }
    </script>
  </body>
</html>
